<template>
  <div>
    <div class="time-wrapper">
      <div class="bigTitle">消化日动态</div>
      <div style="text-align: right">
        <el-date-picker
            style="width: 50%"
            v-model="orderTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="handleChange"
        />
        <el-select style="margin-left: 6px;width: 140px" v-model="departmentVal" placeholder="请选择" @change="_getTransportSum">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="percent-wrapper">
      <div class="item">
        <div class="label">已用车辆</div>
        <div class="value">
          <el-progress color="#28DC32FF" :text-inside="true" :stroke-width="16" :percentage="todayPercentage"/>
        </div>
        <div class="percentVal"> {{ todayUse }} / {{todayRatio}}</div>
      </div>
      <div class="item">
        <div class="label">已派订单</div>
        <div class="value">
          <el-progress color="#f9c14e" :text-inside="true" :stroke-width="16" :percentage="tomorrowPercentage"/>
        </div>
        <div class="percentVal"> {{ tomorrowUse }} / {{tomorrowRatio}}</div>
      </div>
    </div>
    <park-bar :source="statesTable" />
  </div>
</template>

<script>
import {transportSum, findServiceRole} from "@/api/services/dashboard.service";
import parkBar from './park-bar'
import {getTabTime} from "./utils";

export default {
  name: "Parking",
  components:{
    parkBar
  },
  data() {
    return {
      statesTable: [],
      orderTime: [],
      radioTime: '今天',
      todayUse: 0, // 已用车辆
      todayRatio: 0,
      todayPercentage:0,
      tomorrowUse: 0, // 已派订单
      tomorrowRatio: 0,
      tomorrowPercentage:0,
      departmentVal: '',
      options: []
    }
  },
  created() {
    const {startTime, endTime} = getTabTime('今天')
    this.orderTime = [startTime,endTime]
    this._findServiceRole()
    this._getTransportSum()
  },
  methods: {
    _getTransportSum() {
      let params = {etime: '', stime: '', timeType: 3, roleId: this.departmentVal}
      if (this.orderTime) {
        params.stime = `${this.orderTime[0]}`
        params.etime = `${this.orderTime[1]}`
      }
      transportSum(params).then(res => {
        const {totalCar,totalUseCar,totalTask,totalAlSend, seatList} = res.data
        this.todayRatio = totalCar
        this.todayUse = totalUseCar // 已用车辆
        this.todayPercentage =  Math.floor((totalUseCar / totalCar) * 100) || 0

        this.tomorrowRatio = totalTask
        this.tomorrowUse = totalAlSend // 已派订单
        this.tomorrowPercentage = Math.floor((totalAlSend / totalTask ) * 100) || 0
        this.statesTable = seatList.map(item => ({...item,seats:item.seats + '座'}))
      })
    },
    _findServiceRole() {
      findServiceRole().then(res => {
        let ret = res.data.map(item => ({...item,label:item.name,value:item.id}))
        ret.unshift({label: '全部', value: ''})
        this.options = ret
      })
    },
    handleChange(data) {
      let startTime = data[0] + " 00:00:00"
      let endTime = data[1] + " 23:59:59"
      this.orderTime = [startTime,endTime]
      this._getTransportSum()
    }
  }
}
</script>
<style lang="less">
.customPicker {
  border-radius: 0;
  width: 140px !important;
  input {
    border-radius: 0;
  }
}

</style>
<style lang="less" scoped>
.time-wrapper {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;

  .bigTitle {
    border-bottom: none;
    padding: 8px 0;
    color: #3A71A8;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
  }
}

.percent-wrapper {
  width: 100%;
  display: flex;
  padding: 10px 0;
  justify-content: space-between;

  .item {
    width: 49%;
    display: flex;
    padding-top: 10px;

    .label {
      font-size: 14px;
      padding-right: 20px;
    }

    .value {
      flex: 1
    }

    .percentVal {
      padding-left: 16px
    }
  }
}
</style>
